<template>
  <div v-if="formData" class="signIn-page">
    <div class="lg-container">
      <div class="signIn-box shadow-block">
        <h1 class="page-title">登录</h1>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="formRules"
          class="signIn-form"
        >
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              class="common-input"
              type="text"
              placeholder="用户名"
              @keyup.enter="login"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              class="common-input"
              type="password"
              placeholder="密码"
              show-password-on="click"
              @keyup.enter="login"
            />
          </el-form-item>
          <el-form-item class="footer">
            <el-button :loading="isLoginLoading" type="primary" @click="login"
              >确定登录</el-button
            >
            <el-button @click="goToRegister">我要注册</el-button>
            <!-- <nuxt-link class="forget-btn" to="/forget_pwd">
              忘记密码？
            </nuxt-link> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/store/useUserStore'
export default {
  name: 'SignIn',
  data() {
    return {
      formData: {
        username: '',
        password: '',
      },
      formRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      isLoginLoading: false,
    }
  },
  methods: {
    /**
     * @desc 请求 登录
     */
    async requestLogin() {
      this.isLoginLoading = true
      try {
        const res = await this.$API.user.login(this.formData)
        const userStore = useUserStore()
        userStore.setToken(res.data.token)
        await this.getUserInfo()
      } catch (error) {
        this.isLoginLoading = false
      }
    },
    /** 获取个人信息 */
    async getUserInfo() {
      try {
        const res = await this.$API.user.getUserInfo()
        const userStore = useUserStore()
        userStore.setUserInfo(res.data)
        this.isLoginLoading = false
        this.$toast.success('登录成功')
        const toPath = decodeURIComponent((this.$route.query?.redirect || '/'))
        if (toPath) {
          this.$router.replace(toPath)
        } else {
          this.$router.replace('/')
        }
      } catch (error) {
        this.isLoginLoading = false
      }
    },

    login() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.requestLogin()
        } else {
          this.$toast.warning('请填写完整信息')
        }
      })
    },

    handleForgetPwd() {
      this.$router.push('/forget_pwd')
    },

    goToRegister() {
      this.$router.push('/signUp')
    },
  },
}
</script>

<style lang="less">
.signIn-page {
  height: 100%;
  .signIn-box {
    background-color: #fff;
    padding: 60px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .page-title {
      font-size: 32px;
      color: @colorTextTitle;
      margin-bottom: 50px;
    }
    .signIn-form {
      width: 500px;

      .forget-btn {
        display: block;
        color: @colorText-2;
      }

      @media screen and (max-width: @breakpoints-sm) {
        width: 85%;
      }
    }
  }
}
</style>
